<template>
    <div>
        <el-card style="border: 0px;" shadow="never">
            <template slot="header">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-input v-model="params.studentName" :maxlength="10" show-word-limit clearable placeholder="按学生姓名模糊查询" style="width: 220px;margin-right: 5px"></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 10px">
                    <el-col :span="24">

                        <el-upload
                                ref="upload"
                                name="file"
                                :show-file-list="false"
                                :limit="1"
                                :auto-upload="true"
                                :headers="{'token': token()}"
                                style="display: inline-block"
                                action="http://localhost:56700/studentManager/importExcel"
                                :on-success="uploadSuccess"
                                :on-exceed="uploadExceed"
                                :before-upload="beforeUpload"
                                :on-error="uploadError">
                            <el-button icon="el-icon-upload2" type="primary" v-loading.fullscreen.lock="fullscreenLoading">excel导入</el-button>
                        </el-upload>


                        <el-button icon="el-icon-download" style="margin-left: 5px" type="success">excel导出</el-button>
                        <el-button icon="el-icon-printer" type="danger">生成图像</el-button>
                    </el-col>
                </el-row>

            </template>

            <el-table :data="studentList" size="mini" v-loading="loading" :height="550" stripe>
                <el-table-column type="index" label="序号" align="center" width="80px"></el-table-column>
                <el-table-column label="操作" align="center" width="100px">
                    <template slot-scope="scope">
                        <el-popover placement="right" width="200" trigger="click">
                            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="openReplaceClassesWindow(scope.row)">替换班级</el-button>
                            <el-button slot="reference" icon="el-icon-setting" size="mini">操作</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="studyType" label="状态" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag style="width: 100%;height: 100%;" :type="scope.row.studyType == '1' ? 'primary' : ( scope.row.studyType == '2' ? 'warning' : ( scope.row.studyType == '3' ? 'danger' : 'success' ))">
                            {{scope.row.studyType == '1' ? '在读' : ( scope.row.studyType == '2' ? '休学' : ( scope.row.studyType == '3' ? '流失' : '毕业' ))}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="hasRegister" label="是否报档" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="subSchoolName" label="所在校区" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="vocationalName" label="所属专业" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="stageName" label="所属阶段" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="classesName" label="所在班级" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="nickName" label="姓名" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sex" label="性别" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.sex ? ( scope.row.sex == '1' ? '男' : '女')  : '-'}}
                    </template>
                </el-table-column>
                <el-table-column prop="telephone" label="手机号" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="" label="父母联系方式" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.emergencyRelation}} --- {{ scope.row.emergencyContact }}
                    </template>
                </el-table-column>
                <el-table-column prop="idCard" label="身份证号" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="birthday" label="出生年月" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="enterTime" label="入学日期" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="" label="入学年龄" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{handleAge(scope.row.idCard,$YEAR_MONTH_DAY(scope.row.startTime))}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="当前年龄" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{handleAge(scope.row.idCard,null)}}
                    </template>
                </el-table-column>
                <el-table-column prop="endTime" label="毕业日期" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{$YEAR_MONTH_DAY(scope.row.endTime)}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="毕业年龄" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{handleAge(scope.row.idCard,$YEAR_MONTH_DAY(scope.row.endTime))}}
                    </template>
                </el-table-column>
                <el-table-column prop="" label="成绩" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="originate" label="来源" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="education" label="入学学历" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="transitRegisterTime" label="中专注册时间" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="transitSource" label="中专注册地" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="" label="大专注册时间" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="hasEstablish" label="成考" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.hasEstablish == '1' ? '是' : '否'}}
                    </template>
                </el-table-column>
                <el-table-column prop="province" label="省" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="city" label="市" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="area" label="县/区" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="township" label="镇/乡" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="detailed" label="村" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="graduationSchool" label="毕业院校" align="center" show-overflow-tooltip></el-table-column>
            </el-table>

            <el-pagination
                    :total="params.total"
                    :page-size="params.size"
                    :page-sizes="[10, 20, 30, 400]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page="params.page"
                    :hide-on-single-page="false"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
            ></el-pagination>

        </el-card>

        <student-replace-classes ref="studentReplaceClasses"></student-replace-classes>
    </div>
</template>

<script>

    import { getToken } from '@/utils/tool'
    import { getStudentList } from '@/api/quality/student-manager'
    export default {
        name: "student-index",
        components:{
            StudentReplaceClasses:()=>import("@/views/quality/student-manager/student-replace-classes.vue")
        },
        data(){
            return {
                studentList:[],
                loading:false,
                params:{page:1,size:10,total:0},
                fullscreenLoading:false,
                quillUpdateImg:false,
            }
        },
        methods:{
            token(){
                return getToken();
            },
            handlePageChange(page){
                this.params.page = page;
                this.getStudentList(this.params);
            },
            handleSizeChange(size){
                this.params.size = size;
                this.getStudentList(this.params);
            },
            getStudentList(data){
                getStudentList(data).then(res=>{
                    this.studentList = res.data.data.rows;
                    this.params.total = res.data.data.total;
                    this.loading = false;
                })
            },
            uploadError(err,file,fileList){
                this.$message.error(file.name + "文件上传失败");
                return false;
            },
            uploadExceed(){
                this.$message.error("上传的文件超出了限定了个数");
                return false;
            },
            beforeUpload(file){
                const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                const isLt1M = file.size / 1024 / 1024 < 10;
                if (!isJPG) {
                    this.$message.error('仅支持格式为xlsx结尾的文件');
                }
                if (!isLt1M) {
                    this.$message.error('文件最大不得超过10M');
                }
                isJPG && isLt1M ? this.quillUpdateImg = true : this.quillUpdateImg = false;

                if(!(isJPG && isLt1M)){
                    this.fullscreenLoading = false;
                }else{
                    this.fullscreenLoading = true;
                }

                return isJPG && isLt1M;

            },
            uploadSuccess(response,file,filelist){
                if(response.success){
                    this.fullscreenLoading = false;
                    this.getStudentList(this.params);
                }
            },
            openReplaceClassesWindow(data){
                this.$refs['studentReplaceClasses'].parent = data;
                this.$refs['studentReplaceClasses'].data = {};
                this.$refs['studentReplaceClasses'].value = true;
            },
            handleAge(idCard,date){
                date = new Date() || date;
                let myDate = new Date(date);
                let year = parseInt(myDate.getFullYear());
                let month = parseInt(myDate.getMonth() + 1);

                let result = 0;

                let studentYear = parseInt(idCard.substring(6, 10));
                let studentMonth = parseInt(idCard.substring(10, 12));//2304021989081600111

                if(month >= studentMonth){
                    result = (year - studentYear) + (month - studentMonth) / 12;
                }else if(month < studentMonth){
                    result = (year - 1 - studentYear) + ( month + 12 - studentMonth ) / 12;
                }
                return result.toFixed(1);
            },
        },
        created(){
            this.getStudentList(this.params);
        }
    }
</script>

<style scoped>

</style>